<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
</head>
<style>
    .mcontent{
        padding-top: 50px;
    }
    .sidebar{
        width: 200px;
        height:100%;
        padding-top: 12px;
        /*padding-left: 12px;*/
        /*padding-right: 12px;*/
        background: #eeeeee;
    }
    html,body{
        height: 100%;
    }
    .mcontent{
        height: 100%;
    }
    .contentt{
        padding-left: 200px;
    }
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container " >
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="#">朕的皇宫</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse" >
            <ul class="nav navbar-nav" >
                <li class=""><a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">上朝</a>
                    <ul class="dropdown-menu">
                        <li><a href="">有事早奏</a></li>
                        <li><a href="">无事退朝</a></li>
                    </ul>
                </li>
                <li class=""><a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">批阅奏折</a>
                    <ul class="dropdown-menu">
                        <li><a href="">准了</a></li>
                        <li><a href="">不准</a></li>
                    </ul>
                </li>
                <li class=""><a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">颁布圣旨</a>
                    <ul class="dropdown-menu">
                        <li><a href="">昭曰</a></li>
                        <li><a href="">制曰</a></li>
                        <li><a href="">敕曰</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">出宫</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="mcontent">
    <div class="sidebar">
        <ul class="nav nav-pills  nav-stacked" role="tablist" >
            <li class="active"><a id="lib" href="">上书房</a></li>
            <li class=""><a id="garden" href="">御花园</a></li>
            <li class=""><a id="harem" href="">后宫</a></li>
        </ul>
    </div>

</div>

<div class="contentt">
    qweeeeeeeeeeeee
</div>
</body>
</html>
<script>
    $('#myAffix').affix({
        offset: {
            top: 100,
            bottom: function () {
                return (this.bottom = $('.footer').outerHeight(true))
            }
        }
    })
    $(".nav-pills a").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
        switch ($(this).attr("id")) {
            case "lib":
//                $(".contentt").load("app/tt");
//                $(".contentt").load("app/lib.html");
                alert($(this).attr("id"))
                break;

            case "lib":

                break;

            case "lib":

                break;
        }


    })
</script>





